<template>
	<view class="container">
		<view class="address-form">
			<!-- <view class="address" @tap="gotoMap">请选择收货地址<text class="iconfont icon-qianwang"></text></view> -->
			<view class="form-item">
				<label>地址</label>
				<input v-model="form.address" placeholder="请输入地址" placeholder-class="input-ph" maxlength="50" style="width: 400rpx" />
			</view>
			<view class="form-item">
				<label>姓名</label>
				<input v-model="form.name" placeholder="请输入收货人姓名" placeholder-class="input-ph" maxlength="20" />
			</view>
			<view class="form-item">
				<label>电话</label>
				<input v-model="form.phone" placeholder="请输入收货人联系电话" placeholder-class="input-ph" maxlength="11" type="number" />
			</view>
			<view class="form-item">
				<label>楼栋门牌</label>
				<input v-model="form.doorplate" placeholder="详细地址,例如1层101室" placeholder-class="input-ph" maxlength="30" style="width: 400rpx" />
			</view>
			<view class="form-item">
				<label>默认地址</label>
				<switch color="#ff5a14" style="transform: scale(0.7)" :checked="form.defaultFlag" @change="address.defaultFlag = !address.defaultFlag"></switch>
			</view>

			<view class="update-address">
				<text class="delete" @tap="deleteAddress">删除</text>
				<text class="update" @tap="submitForm">保存</text>
			</view>
		</view>
	</view>
</template>

<script>
import { editUserAddress, deleteUserAddress } from '@/api/user';
import { validateNotEmpty, validatePhone } from '@/utils/validate.js';
export default {
	onLoad(params) {
		this.form = JSON.parse(params.address);
	},
	data() {
		return {
			form: '',
			defaultFlag: false
		};
	},
	methods: {
		gotoMap() {
			uni.navigateTo({
				url: '/pages/user/service/user_address/address_map'
			});
		},
		submitForm() {
			const title = validateNotEmpty(['地址', '姓名', '手机号', '楼栋门牌'], [this.form.address, this.form.name, this.form.phone, this.form.doorplate]);
			if (title != null) {
				uni.showToast({
					title: title,
					mask: true,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			if (!validatePhone(this.form.phone)) {
				uni.showToast({
					title: '手机号格式有误',
					mask: true,
					icon: 'none',
					duration: 1000
				});
				return;
			}
			editUserAddress(this.form).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '修改成功',
						success: () => {
							setTimeout(() => {
								uni.navigateBack(1);
							}, 1000);
						}
					});
				}
			});
		},
		deleteAddress() {
			deleteUserAddress(this.form.id).then((res) => {
				if (res.code == 200) {
					uni.showToast({
						title: '删除成功',
						success: () => {
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.container {
	background-color: #fafafa;
	padding: 30rpx;
}

.address-form {
	background-color: #fff;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	gap: 40rpx;
	border-radius: 15rpx;
	position: relative;

	.address {
		width: 100%;
		text-align: center;
		padding: 20rpx 0;
		color: @theme-color;
		border: 1rpx solid @theme-color;
	}

	.form-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		label {
			color: #646566;
		}

		input {
			text-align: right;
			font-size: 28rpx;
		}
	}
}

.update-address {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: -150rpx;
	display: flex;
	flex-direction: row;
	gap: 30rpx;
	padding: 0 5%;
	text-align: center;
	color: #fff;

	.delete,
	.update {
		display: block;
		width: 50%;
		background-color: @theme-color;
		padding: 25rpx 0;
		border-radius: 50rpx;
	}

	.delete {
		background-color: #ff9600;
		color: @theme-color;
	}
}

/deep/ .input-ph {
	color: #c8c9cf;
	font-size: 28rpx;
}
</style>
